<template>
  <echartsView :loading="loading" :options="options"></echartsView>
</template>

<script>
import { echartsView } from '@/components'
import { getAllocated } from '@/api/followUpManagement'
export default {
  components: {
    echartsView
  },
  props: {
    strContent: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data () {
    return {
      loading: false,
      options: {
        title: {
          text: '房源统计',
          x: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical', // 垂直显示
          y: 'top',
          x: 'left' // 居左显示
        },
        series: [
          {
            name: '分配统计',
            type: 'pie',
            radius: '65%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
   this.$nextTick(() => {
     this.fetchData()
   })
  },
  methods: {
    fetchData () {
      this.loading = true
      getAllocated()
        .then((res) => {
          this.options.series[0].data = [
            { name: '已分配', value: res.Allocated },
            { name: '未分配', value: res.Unallocated }
          ]
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
</style>
